<nav id="header" class="bg-white fixed w-full z-10 top-0 shadow">

  <div id="progress" class="h-1 z-20 top-0" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>

  <div class="w-full container mx-auto flex flex-wrap items-center justify-between my-1">
      <div class="pl-4">
          <a class="text-gray-900 text-base no-underline hover:no-underline font-bold text-xl"  href="/">
              {{ $.Site.Title }}
          </a>
      </div>

      <div class="block lg:hidden pr-4">
          <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-900 hover:border-teal-500 appearance-none focus:outline-none">
              <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
          </button>
      </div>

      <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-100 md:bg-transparent z-20" id="nav-content">
          <ul class="list-reset lg:flex justify-end flex-1 items-center">
              {{- range $item := $.Site.Params.NavItems }}
              <li class="mr-3">
                  <a href="{{ index $item 1 }}" class="inline-block py-2 px-2 text-gray-700 font-bold no-underline">{{ index $item 0 }}</a>
              </li>
              {{- end }}
          </ul>
      </div>
  </div>
</nav>